<template>
  <div id="app">
    <!--router-link的补充属性-->
    <!--<router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>-->
    <!--<router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" tag="button">关于</router-link>-->
    <!--<button @click="linkToHome">首页</button>
    <button @click="linkToAbout">关于</button>-->
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" tag="button">关于</router-link>
    <router-link :to="'/user/'+ userId" tag="button">用户</router-link>
    <!--<router-link :to="{path:'/profile',query:{name:name,age:age,height:height}}" tag="button">档案</router-link>-->
    <button @click="linkToPrifile">档案</button>
    <!--keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。-->
    <!--router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存-->
    <!--exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存-->
    <keep-alive exclude="user,about">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        userId: '001',
        name: 'wsq',
        age: 18,
        height: '180'
      }
    },
    methods: {
      /*linkToHome() {
        this.$router.push("/home");
      },
      linkToAbout() {
        this.$router.push("/about");
      }*/
      linkToPrifile() {
        this.$router.push({
          path: '/profile',
          query: {
            name: this.name,
            age: this.age,
            height: this.height
          }
        })
      }
    }
  }
</script>

<style>
  /*.router-link-active {
    color: #ff0000;
  }*/

  .active {
    color: #ff0000;
  }
</style>
